<template>
  <div class="user_container">
    <div class="form_content">
      <a-form
        :model="formState"
        :label-col="labelCol"
        :wrapper-col="wrapperCol"
      >
        <a-form-item label="部门筛选" class="tree">
          <a-input v-model:value="tree_choice_name" @focus="handleFocus" />
          <a-tree
            class="tree_choice"
            v-show="isShow"
            checkable
            :tree-data="treeData"
            v-model:checkedKeys="checkedKeys"
            :replace-fields="replaceFields"
            @check="handleCheck"
          >
          </a-tree>
        </a-form-item>
        <a-form-item label="岗位筛选:">
          <a-select v-model:value="formState.jobs" placeholder="--所有岗位--">
            <a-select-option value="shanghai">Zone one</a-select-option>
            <a-select-option value="beijing">Zone two</a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item label="入职时间:">
          <a-date-picker v-model:value="formState.startTime" />
          <a-date-picker v-model:value="formState.endTime" />
        </a-form-item>
      </a-form>
      <button @click="console.log('form', formState)">print</button>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      labelCol: { span: 4 },
      wrapperCol: { span: 14 },
      // 树形控件中对应的字段配置项
      replaceFields: {
        // children: "child",
        // title: "name",
        key: "id",
      },
      // 树形控件双向绑定数据
      checkedKeys: [13],
      //树形选择数据
      treeData: [
        {
          title: "向阳花",
          id: 1,
          children: [
            {
              title: "技术部",
              id: 11,
            },
            {
              title: "销售部",
              id: 12,

              children: [
                {
                  title: "质控小组",
                  id: 121,
                  children: [{ title: "测试小组", id: 1211 }],
                },
              ],
            },
            {
              title: "测试部",
              id: 13,
            },
            {
              title: "产品部",
              id: 14,
            },
            {
              title: "企微新增的部门",
              id: 15,
            },
            {
              title: "其他（待设置部门）",
              id: 16,
            },
          ],
        },
      ],
      isShow: false,
      tree_choice_name: "",
      formState: {
        jobs: undefined,
        endTime: "",
        startTime: "",
      },
    };
  },
  created() {},
  mounted() {
    let that = this;
    window.document.addEventListener("click", function (e) {
      let contains = document.documentElement.contains
        ? function (parent, node) {
            return parent !== node && parent.contains(node);
          }
        : function (parent, node) {
            while (node && (node = node.parentNode))
              if (node === parent) return true;
            return false;
          };
      const isTree = document
        .getElementsByClassName("tree")[0]
        .contains(e.target);
      // console.log("isTree", isTree);
      that.isShow = isTree ? true : false;
    });
    this.handleCheck(this.checkedKeys);
  },
  methods: {
    //递归回显树形控件选择id的名称
    handleFindName(id, arr) {
      arr.forEach((item) => {
        if (item.id === id) {
          this.tree_choice_name += item.title + ",";
        } else if (item.children) {
          this.handleFindName(id, item.children);
        }
      });
    },
    //树形控件选择改变触发
    handleCheck(checkedKeys) {
      this.tree_choice_name = "";
      this.checkedKeys.forEach((id) => {
        console.log("this.treeData", this.treeData, id);
        this.handleFindName(id, this.treeData);
      });
      this.tree_choice_name = this.tree_choice_name.slice(0, -1);
    },
    //部门筛选获取焦点显示树形控件
    handleFocus() {
      this.isShow = true;
      // console.log(document.getElementsByClassName("tree")[0]);
      document
        .getElementsByClassName("tree")[0]
        .addEventListener("click", function () {
          this.isShow = true;
        });
    },
  },
};
</script>
<style lang="less" scoped>
.form_content {
  width: 810px;
  height: 141px;
  background: #f9f9f9;
  border: 1px solid #edf3f8;
  border-radius: 4px;
}

.tree {
  position: relative;
  .tree_choice {
    position: absolute;
    top: 31px;
    left: 0;
    z-index: 100;
    width: 250px;
    background-color: #fff;
    border: 1px solid #ccc;
  }
}
</style>
